<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            position: absolute;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
            background-color: red;
            color: #ffffff;
            border-radius: 50%;
        }

    </style>
</head>
<body>
    <div id="box">点我啊，跑！</div>
</body>
<script>
    function animate(obj,option){
        obj.timer = setInterval(function(){
            var flag = true;
            for(var k in option){
                var leader = parseInt(getStyle(obj,k)) || 0;//获取指定元素当前属性值
                var target = option[k];//获取指定元素目标指定值
                var step = (target - leader)/10;//计算每次移动的步长
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader = leader + step;//计算属性值
                obj.style[k] = leader + "px";//设置属性值
                if(leader != taget){
                    flag = false;
                }
            }
            if(flag){//移动完后清除定时器
                clearInterval(obj,timer);

            }
        },15);
    }

    function getStyle(obj,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(obj,null)[attr];
        }else{
            return obj.currentStyle[attr];
        }
    }

    var obj = document.getElementById('box');
    obj.onclick = function(){
        animate(obj,{'left':500,'top':200});
    }
</script>
</html>